<!--  -->
<template>
  <div class="body">
    <div class="title">缴费管理</div>
    <div class="search">
 
      <el-form :inline="true" class="demo-form-inline">

        <el-form-item label="状态">
          <el-select clearable v-model="params.state" style="width:120px" placeholder="请选择状态">
            <el-option label="已缴费" value="2" />
            <el-option label="未缴费" value="1" />
          </el-select>

        </el-form-item>

        <el-form-item label="账期">
          <!-- {{ params }} -->
          <el-date-picker @change="dateChange" v-model="dateValue" type="daterange" value-format="YYYY-MM-DD"
            format="YYYY-MM-DD" unlink-panels range-separator="至" start-placeholder="起始日期" end-placeholder="截止日期"
            :shortcuts="shortcuts" />


        </el-form-item>

        <el-form-item label="楼栋">

          <el-cascader :props="props" placeholder="请选择楼栋" clearable v-model="cascaderValue" :options="buildings" />

        </el-form-item>


        <el-form-item label="房号">
          <el-input v-model="params.houseno" placeholder="请输入房号" clearable />
        </el-form-item>

        <el-form-item label="姓名">
          <el-input v-model="params.name" placeholder="请输入姓名" clearable />
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="params.mibile" placeholder="请输入电话" clearable />
        </el-form-item>

        <el-form-item label="添加人">
          <el-input v-model="params.admin" placeholder="请输入添加人" clearable />
        </el-form-item>

        <el-form-item label="流水账单">
          <el-input v-model="params.orderno" placeholder="请输入流水账单" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getFreeData">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div><el-button @click="add" type="primary">添加</el-button>
      <el-button type="danger" @click="delAll">删除</el-button> 
    </div>
    <div class="table">
      <el-table @selection-change="handleSelectionChange" :data="state.tableData" style="width: 100%">
        <el-table-column type="selection" width="40" />
        <el-table-column prop="building" label="楼栋名" width="180" />
        <el-table-column prop="houseno" label="房间号" width="180" />
        <el-table-column prop="userName" label="姓名" />
        <el-table-column prop="mobile" label="联系方式" />
        <el-table-column prop="type" label="缴费类型" />
        <el-table-column width="200" label="账期">
          <template #default="scope">
            {{ scope.row.begindate }}至 {{ scope.row.enddate }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="应缴金额" />
        <el-table-column prop="stateName" label="状态" />
        <el-table-column width="200" label="导入时间">
          <template #default="scope">
            {{ dateFormat(scope.row.addtime) }}
          </template>
        </el-table-column>

        <el-table-column width="200" label="操作">
          <template #default="scope">
            <el-button type="success">详情</el-button>
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination v-model:current-page="params.page" v-model:page-size="params.psize"
        :page-sizes="[15, 30, 50, 100, 300]" background layout="total, sizes, prev, pager, next, jumper"
        :total="state.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

<!-- 添加费用 -->
    <Add @close="closeHandle" v-if="dialogVisible"></Add>
  </div>
</template>

<script lang='ts' setup>
import { FreeParams } from '../../service/fee/type'
import { getList, deleteAll } from '../../service/fee/fee'
import { getBuildingList } from '../../service/building/building'
import { reactive, toRefs, ref, onMounted, watch, toRaw } from 'vue'
import moment from 'moment';
import { ElMessageBox,ElMessage } from 'element-plus'
import Add from '../../components/free/Add.vue';
const params = reactive<FreeParams>({
  key: "",
  houseno: "",
  state: null,
  name: "",
  mibile: "",
  admin: "",
  orderno: "",
  begindate: "",
  enddate: "",
  buildingid: null,
  page: 1,
  psize: 15
})
//楼栋级联选择器
const cascaderValue = ref([])
const props = { label: "name", value: "id", checkStrictly: true }
watch(cascaderValue, (newValue) => {
  if (!newValue) {
    params.buildingid = null;
  }
  else {
    params.buildingid = newValue[newValue.length - 1];
  }
})

//获取楼栋数据
const buildings = ref([]);
const getBuildingData = async () => {

  const res: any = await getBuildingList(null);
  console.log(11111, res);
  if (res.errCode === 10000) {
    buildings.value = res.data.list;
  }

}


//日期选择器 选择事件
const dateChange = (e: any) => {

  if (e != null) {

    params.begindate = e[0];
    params.enddate = e[1];


  }
  else {
    params.begindate = "";
    params.enddate = "";
  }



}

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近3个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

const dateValue = ref('')
//格式化时间
const dateFormat = (val: string) => {
  return moment(val).format("YYYY-MM-DD HH:mm");
}
//表格数据
const state = reactive({
  total: 0,
  tableData: []
})
//请求表格数据

const getFreeData = async () => {

  const res: any = await getList(params);
  console.log("表格数据", res);
  if (res.errCode === 10000) {
    state.tableData = res.data.list;
    state.total = res.data.counts;
  }


}
//每页显示条数改变
const handleSizeChange = (val: number) => {
  params.psize = val;
  getFreeData();
}
//当前页改变
const handleCurrentChange = (val: number) => {
  params.page = val;
  getFreeData();
}

//多选
const selectionRows = ref<Array<any>>([]);

const handleSelectionChange = (val: Array<any>) => {

  selectionRows.value = val;


}
//批量删除

const delAll = async () => {
  //提示确认删除
 
  if(!selectionRows.value.length){
    ElMessage.error('请选择要删除数据');
    return;
  }
  const confirm = await ElMessageBox.confirm('是否删除选中的记录?').catch(() => { });
  if (!confirm) return;
  const ids = selectionRows.value.map(item => item.id);
  const res: any = await deleteAll(ids);
  if (res.errCode === 10000) {

    getFreeData();
  }

 

}

//添加窗口的显示
const dialogVisible=ref(false);

const add=()=>{
  dialogVisible.value=true;
}
const closeHandle=(val:boolean | undefined)=>{
  dialogVisible.value=false;
  if(val)   getFreeData();
}
// //搜索方法
// const onSubmit = () => {

//   getFreeData();

// }
onMounted(() => {
  getBuildingData();
  getFreeData();
})
</script>
<style scoped lang="less">
.title {
  margin-bottom: 20px;
}

.page {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>